<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心情日记</title>
    <link rel="stylesheet" href="css/项目设计.css" />
    <!-- 模拟图标样式 -->
    <style>
        .icon-home::before { content: "🏠"; }
        .icon-diary::before { content: "📒"; }
        .icon-analysis::before { content: "🧠"; }
        .icon-trend::before { content: "📈"; }
        .icon-mindfulness::before { content: "🧘"; }
        .icon-mic::before { content: "🎙️"; }
        .icon-stop::before { content: "⏹️"; }
        .icon-plus::before { content: "+"; }
        .icon-sun::before { content: "☀️"; }
        .icon-cloud::before { content: "☁️"; }
        .icon-check::before { content: "✓"; }
        .icon-error::before { content: "!"; }
        .icon-user::before { content: "👤"; }
        .icon-lock::before { content: "🔒"; }
        .icon-logout::before { content: "🚪"; }
        .icon-empty::before { content: "✏️"; }
        .icon-volume-high::before { content: "🔊"; }
        .icon-volume-medium::before { content: "🔉"; }
        .icon-volume-low::before { content: "🔈"; }
        .icon-volume-off::before { content: "🔇"; }
    </style>
</head>
<body>
    <!-- 登录遮罩层 -->
    <div class="login-overlay" id="loginOverlay">
        <div class="modal">
            <h2 class="modal-title">请登录账号</h2>
            <div class="form-group">
                <label class="form-label" for="loginUsername">用户名</label>
                <input type="text" class="form-input" id="loginUsername" placeholder="请输入用户名">
                <div class="form-error" id="usernameError"></div>
            </div>
            <div class="form-group">
                <label class="form-label" for="loginPassword">密码</label>
                <input type="password" class="form-input" id="loginPassword" placeholder="请输入密码">
                <div class="form-error" id="passwordError"></div>
            </div>
            <button class="form-btn" id="loginBtn">登录</button>
            <div class="form-links">
                <a href="#" class="form-link">忘记密码？</a>
                <a href="#" class="form-link">注册账号</a>
            </div>
        </div>
    </div>

    <!-- 修改用户名弹窗 -->
    <div class="login-overlay" id="changeUsernameOverlay">
        <div class="modal">
            <h2 class="modal-title">修改用户名</h2>
            <div class="form-group">
                <label class="form-label" for="newUsername">新用户名</label>
                <input type="text" class="form-input" id="newUsername" placeholder="请输入新用户名">
                <div class="form-error" id="newUsernameError"></div>
            </div>
            <div class="btn-group">
                <button class="form-btn secondary-btn" id="cancelUsernameBtn">取消</button>
                <button class="form-btn" id="confirmUsernameBtn">确认修改</button>
            </div>
        </div>
    </div>

    <!-- 修改密码弹窗 -->
    <div class="login-overlay" id="changePasswordOverlay">
        <div class="modal">
            <h2 class="modal-title">修改密码</h2>
            <div class="form-group">
                <label class="form-label" for="oldPassword">原密码</label>
                <input type="password" class="form-input" id="oldPassword" placeholder="请输入原密码">
                <div class="form-error" id="oldPasswordError"></div>
            </div>
            <div class="form-group">
                <label class="form-label" for="newPassword">新密码</label>
                <input type="password" class="form-input" id="newPassword" placeholder="请输入新密码（至少6位）">
                <div class="form-error" id="newPasswordError"></div>
            </div>
            <div class="form-group">
                <label class="form-label" for="confirmPassword">确认新密码</label>
                <input type="password" class="form-input" id="confirmPassword" placeholder="请再次输入新密码">
                <div class="form-error" id="confirmPasswordError"></div>
            </div>
            <div class="btn-group">
                <button class="form-btn secondary-btn" id="cancelPasswordBtn">取消</button>
                <button class="form-btn" id="confirmPasswordBtn">确认修改</button>
            </div>
        </div>
    </div>

    <!-- 练习完成模态框 -->
    <div class="login-overlay" id="sessionCompleteOverlay">
        <div class="modal">
            <h2 class="modal-title">练习完成！</h2>
            <div style="text-align: center; margin: 20px 0;">
                <div style="font-size: 60px; margin-bottom: 15px;">🙏</div>
                <p>你已完成 <span id="completedDuration">10</span> 分钟的正念练习</p>
                <p style="margin-top: 10px; color: #666;">继续保持，感受内心的平静</p>
            </div>
            <div class="session-reflection" style="margin: 20px 0;">
                <label class="form-label">练习感受</label>
                <textarea class="form-input" id="sessionReflection" placeholder="记录一下练习后的感受..."></textarea>
            </div>
            <div class="btn-group">
                <button class="form-btn secondary-btn" id="anotherSessionBtn">再练习一次</button>
                <button class="form-btn" id="closeSessionBtn">完成</button>
            </div>
        </div>
    </div>

    <!-- 提示框元素 -->
    <div class="toast success" id="toast">
        <span class="icon-check"></span>
        <span id="toastMessage">操作成功</span>
    </div>

    <!-- 语音动画元素 -->
    <div class="voice-animation" id="voiceAnimation">
        <div class="voice-circle">
            <span class="voice-icon icon-mic" id="voiceAnimationIcon"></span>
            <div class="voice-waves">
                <div class="voice-wave"></div>
                <div class="voice-wave"></div>
                <div class="voice-wave"></div>
            </div>
        </div>
        <div class="voice-text" id="voiceAnimationText">点击麦克风开始录音</div>
        <button class="voice-cancel" id="voiceCancel">取消</button>
    </div>

    <!-- 音频元素 - 已删除冥想音乐 -->
    <audio id="audioRain" preload="none">
        <source src="img/雨声 - 耳聆网.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放
    </audio>
     
    <audio id="audioOcean" preload="none">
        <source src="sounds/ocean.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放
    </audio>
     
    <audio id="audioForest" preload="none">
        <source src="sounds/forest.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放
    </audio>

    <!-- 顶部栏 -->
    <div class="top-bar">
        <div class="logo">心情日记</div>
        <button class="user-btn" id="userBtn">用</button>
        <!-- 用户菜单 -->
        <div class="user-menu" id="userMenu">
            <div class="user-info">
                <div class="user-name" id="displayUsername">用户名</div>
            </div>
            <div class="menu-item icon-user" id="changeUsernameItem">修改用户名</div>
            <div class="menu-item icon-lock" id="changePasswordItem">修改密码</div>
            <div class="menu-divider"></div>
            <div class="menu-item icon-logout" id="logoutItem">退出登录</div>
        </div>
    </div>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-item icon-home active" data-page="home">首页</div>
        <div class="sidebar-item icon-diary" data-page="diary">日记记录</div>
        <div class="sidebar-item icon-analysis" data-page="analysis">情绪分析</div>
        <div class="sidebar-item icon-trend" data-page="trend">趋势追踪</div>
        <div class="sidebar-item icon-mindfulness" data-page="mindfulness">正念练习</div>
    </aside>

    <!-- 主内容区 -->
    <main class="main">
        <!-- 首页内容 - 今日心情记录 -->
        <div class="page-content home-page active">
            <div class="card mood-record">
                <div class="record-header">
                    <h2>今日心情记录</h2>
                    <div class="current-date" id="currentDate"></div>
                </div>
                
                <div class="weather-info" id="weatherInfo">
                    <span class="weather-icon icon-sun"></span>
                    <span>今天 晴朗 22°C - 适合户外活动</span>
                </div>

                <div class="mood-input-section">
                    <p>描述一下今天的心情和感受吧...</p>
                    <div class="input-area">
                        <textarea class="mood-input" id="moodContent" placeholder="今天发生了什么？感觉怎么样？有什么想法或感悟？"></textarea>
                        <button class="voice-btn icon-mic" id="voiceBtn"></button>
                    </div>
                </div>

                <div class="mood-detail-section">
                    <div class="section-title">选择主要情绪</div>
                    <!-- 用户可选择的情绪区域 -->
                    <div class="emotion-selector" id="userEmotionSelector">
                        <div class="emotion-item emotion-calm">平静</div>
                        <div class="emotion-item emotion-happy">愉悦</div>
                        <div class="emotion-item emotion-anxious">焦虑</div>
                        <div class="emotion-item emotion-sad">低落</div>
                        <div class="emotion-item emotion-angry">愤怒</div>
                        <div class="emotion-item emotion-calm">放松</div>
                        <div class="emotion-item emotion-happy">兴奋</div>
                        <div class="emotion-item emotion-sad">疲惫</div>
                    </div>
                    
                    <p>AI 实时识别的情绪</p>
                    <!-- AI识别的情绪区域 -->
                    <div class="ai-emotion-selector">
                        <div class="ai-emotion-item ai-emotion-calm selected">平静 (72%)</div>
                        <div class="ai-emotion-item ai-emotion-anxious">略带焦虑 (28%)</div>
                    </div>
                </div>

                <div class="activities-section">
                    <div class="section-title">今天做了什么？(可多选)</div>
                    <div class="activity-tags" id="activityTags">
                        <div class="activity-tag">工作/学习</div>
                        <div class="activity-tag">运动锻炼</div>
                        <div class="activity-tag">与朋友见面</div>
                        <div class="activity-tag">阅读</div>
                        <div class="activity-tag">看电影/剧集</div>
                        <div class="activity-tag">听音乐</div>
                        <div class="activity-tag">烹饪</div>
                        <div class="activity-tag">户外活动</div>
                        <div class="activity-tag">休息放松</div>
                        <div class="activity-tag">其他</div>
                    </div>
                </div>

                <div class="notes-section">
                    <div class="section-title">今日思考与计划</div>
                    <textarea class="notes-input" id="dailyNotes" placeholder="今天有什么值得记住的思考？明天有什么计划或期待？"></textarea>
                </div>

                <div class="save-section">
                    <button class="save-btn" id="saveRecordBtn">保存今日记录并添加到日记</button>
                </div>
            </div>
        </div>

        <!-- 日记记录页面 -->
        <div class="page-content diary-page">
            <div class="card">
                <h2>日记记录</h2>
                <div class="diary-filters">
                    <button class="filter-btn active" data-filter="all">全部</button>
                    <button class="filter-btn" data-filter="week">本周</button>
                    <button class="filter-btn" data-filter="month">本月</button>
                    <button class="filter-btn" data-filter="year">今年</button>
                </div>
                
                <!-- 空状态提示 -->
                <div class="empty-state" id="emptyState">
                    <div class="empty-icon icon-empty"></div>
                    <h3 class="empty-title">还没有记录呢</h3>
                    <p class="empty-message">开始写下你美好的一天吧，记录生活中的点滴心情和感悟，日后回顾会是珍贵的回忆。</p>
                    <button class="empty-action" id="startWritingBtn">开始记录</button>
                </div>
                
                <div class="diary-list" id="diaryList">
                    <!-- 日记内容会通过JS动态添加 -->
                </div>
            </div>
        </div>

        <div class="page-content analysis-page">
            <div class="card">
                <h2>情绪分析</h2>
                <p>过去30天情绪分布：</p>
                <div class="chart-container" style="height: 300px; margin: 20px 0;">
                    <div class="donut-wrapper" style="width: 250px; height: 250px;">
                        <div class="donut-chart donut-base"></div>
                        <div class="donut-chart donut-blue" style="background: conic-gradient(var(--blue) 0% 60%, transparent 60% 100%);"></div>
                        <div class="donut-chart donut-orange" style="background: conic-gradient(var(--orange) 0% 25%, transparent 25% 100%);"></div>
                        <div class="donut-center" style="display: flex; align-items: center; justify-content: center; font-size: 16px;">
                            30天
                        </div>
                    </div>
                </div>
                <div class="legend" style="flex-direction: column; align-items: flex-start; gap: 15px;">
                    <div class="legend-item">
                        <div class="legend-color legend-color-blue"></div>
                        <span>平静 (60%) - 18天</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color legend-color-orange"></div>
                        <span>焦虑 (25%) - 7天</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #52C41A;"></div>
                        <span>愉悦 (10%) - 3天</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #722ED1;"></div>
                        <span>低落 (5%) - 2天</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-content trend-page">
            <div class="card">
                <h2>情绪趋势追踪</h2>
                <p>过去12周情绪变化趋势：</p>
                <div style="height: 300px; background-color: var(--gray-bg); border-radius: var(--border-radius); margin: 20px 0; display: flex; align-items: center; justify-content: center; color: var(--gray);">
                    情绪趋势图表将显示在这里
                </div>
                <p><strong>趋势分析：</strong> 你的情绪整体保持稳定，近两周焦虑情绪有所减少，平静情绪占比提升。建议继续保持当前的生活节奏和作息习惯。</p>
            </div>
        </div>

        <!-- 正念练习列表页面 -->
        <div class="page-content mindfulness-page">
            <div class="card">
                <h2>正念练习</h2>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0;">
                    <div style="padding: 15px; border-radius: var(--border-radius); background-color: var(--light-blue);">
                        <h3>呼吸练习</h3>
                        <p style="margin: 10px 0; font-size: 14px;">专注于呼吸，缓解焦虑情绪</p>
                        <button class="filter-btn mindfulness-exercise-btn" data-exercise="breathing">开始练习</button>
                    </div>
                    <div style="padding: 15px; border-radius: var(--border-radius); background-color: var(--light-blue);">
                        <h3>身体扫描</h3>
                        <p style="margin: 10px 0; font-size: 14px;">放松身体，释放紧张感</p>
                        <button class="filter-btn mindfulness-exercise-btn" data-exercise="body-scan">开始练习</button>
                    </div>
                    <div style="padding: 15px; border-radius: var(--border-radius); background-color: var(--light-blue);">
                        <h3>正念冥想</h3>
                        <p style="margin: 10px 0; font-size: 14px;">提升专注力，平静心情</p>
                        <button class="filter-btn mindfulness-exercise-btn" data-exercise="mindfulness">开始练习</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 正念练习详情页面 -->
        <div class="page-content mindfulness-session-page">
            <div class="card" style="max-width: 800px; margin: 0 auto;">
                <div class="record-header">
                    <h2 id="sessionTitle">呼吸练习</h2>
                    <div id="sessionTimer">00:00</div>
                </div>
                
                <div class="mindfulness-container">
                    <!-- 呼吸动画圆圈 -->
                    <div class="breath-circle">
                        <div class="breath-inner-circle">
                            <span id="breathInstruction">准备开始</span>
                        </div>
                    </div>
                    
                    <!-- 指导文本 -->
                    <div class="session-instructions">
                        <p id="sessionDescription">跟随动画进行深呼吸。当圆圈扩大时吸气，缩小时呼气。专注于你的呼吸，感受身体的变化。</p>
                    </div>
                    
                    <!-- 控制按钮 -->
                    <div class="session-controls">
                        <button class="form-btn" id="startSessionBtn">开始练习</button>
                        <button class="form-btn secondary-btn" id="pauseSessionBtn" disabled>暂停</button>
                        <button class="form-btn secondary-btn" id="endSessionBtn">结束练习</button>
                    </div>
                </div>
                
                <!-- 练习设置 -->
                <div class="session-settings">
                    <h3 class="section-title">练习设置</h3>
                    <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 15px;">
                        <div class="setting-group">
                            <label class="form-label">练习时长</label>
                            <select class="form-input" id="sessionDuration" style="width: 150px;">
                                <option value="300">5分钟</option>
                                <option value="600" selected>10分钟</option>
                                <option value="900">15分钟</option>
                                <option value="1800">30分钟</option>
                            </select>
                        </div>
                        <div class="setting-group">
                            <label class="form-label">呼吸节奏</label>
                            <select class="form-input" id="breathRhythm" style="width: 150px;">
                                <option value="4-4-4-4">均衡呼吸 (4-4-4-4)</option>
                                <option value="4-7-8" selected>放松呼吸 (4-7-8)</option>
                                <option value="5-5">基础呼吸 (5-5)</option>
                            </select>
                        </div>
                        <div class="setting-group">
                            <label class="form-label">背景声音</label>
                            <select class="form-input" id="backgroundSound" style="width: 150px;">
                                <option value="none">无</option>
                                <option value="rain">雨声</option>
                                <option value="ocean" selected>海浪</option>
                                <option value="forest">森林</option>
                            </select>
                            
                            <!-- 音频加载状态 -->
                            <div class="audio-loading" id="audioLoading">加载音频中...</div>
                            
                            <!-- 音量控制 -->
                            <div class="volume-control">
                                <span class="volume-icon icon-volume-medium" id="volumeIcon"></span>
                                <input type="range" min="0" max="100" value="50" class="volume-slider" id="volumeSlider">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <button class="add-diary-btn icon-plus"></button>
    </main>
    <script src="js/项目设计.js"></script>
</body>
</html>